import React, { Component } from "react";
import Form from "./Form";
import List from "./List";

import { minusAction, addAction, loadAction } from "./store/actionCreator";

// redux第三步：从react-redux里面解构connect
// connect是一个函数，这个函数的返回值是一个高阶组件
import { connect } from "react-redux";

// redux的第四步： connect函数执行的时候需要有两个参数，都是函数
// 第一个函数是将仓库的state的值映射到组件的props里面去
// 这个函数可以接受一个参数是state，state就是仓库的数据
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 第二个参数是将仓库的dispatch函数映射到组件的props里面去
const mapDispatchToProps = (dispatch) => {
  return {
    add(num) {
      dispatch(addAction(num));
    },
    minus() {
      dispatch(minusAction());
    },
    load() {
      dispatch(loadAction());
    },
  };
};

class App extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <h2>react-redux</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add(1)}>+</button>
        <button onClick={() => this.props.add(2)}>+2</button>

        <hr />

        <Form />
        <List />
      </>
    );
  }
  componentDidMount() {
    this.props.load();
    // fetch("http://localhost:5000/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //   });
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
